<template>
  <div class="list">
    <section class="list-content">
      <hgroup class="category">
        <div>
          {{index}}.
          <label>{{categoryName}} - <span>{{categorySmall}}</span></label>
        </div>
        <div>
          <el-button type="text"
                     class="btn"
                     v-if="categorySmall === '案卷'"
                     @click="handleToSee('jn')">查看卷内
          </el-button>

          <el-button type="text"
                     class="btn"
                     v-if="categorySmall === '卷内'"
                     @click="handleToSee('aj')">查看本卷
          </el-button>
          <el-button type="text"
                     class="btn"
                     v-if="categorySmall === '卷内' || categorySmall === '组件'"
                     @click="handleToSee('archives')">查看档案
          </el-button>
        </div>
      </hgroup>
      <ul class="introduce">
        <li style="width: 100%">
          <label>题名：</label>
          <span v-html="data.tm"></span>
        </li>
        <li>
          <label>{{categorySmall === '案卷' ? '案卷级档号：': '档号：'}}</label>
          <span v-if="categorySmall === '案卷'" v-html="data.ajdh"></span>
          <span v-else v-html="data.dh"></span>
        </li>
        <li v-if="categorySmall !== '案卷'">
          <label>文号：</label>
          <span v-html="data.wh"></span>
        </li>
        <li v-if="categorySmall !== '案卷'">
          <label>责任者：</label>
          <span v-html="data.zrz"></span>
        </li>
        <li v-if="categorySmall === '案卷'">
          <label>文件开始时间：</label>
          <span v-html="data.kssj"></span>
        </li>
        <li v-if="categorySmall === '案卷'">
          <label>文件结束时间：</label>
          <span v-html="data.jssj"></span>
        </li>
        <li v-else>
          <label>成文时间：</label>
          <span v-html="data.cwrq"></span>
        </li>

        <li v-if="categorySmall === '案卷'">
          <label>卷内文件数：</label>
          <span v-html="data.js"></span>
        </li>

      </ul>

      <div class="operation-btn">
        <el-button type="text"
                   class="btn"
                   v-if="categorySmall === '案卷'"
                   @click="handleToSee('jn')">查看卷内
        </el-button>

        <el-button type="text"
                   class="btn"
                   v-if="categorySmall === '卷内'"
                   @click="handleToSee('aj')">查看本卷
        </el-button>
        <el-button type="text"
                   class="btn"
                   v-if="categorySmall === '卷内' || categorySmall === '组件'"
                   @click="handleToSee('archives')">查看档案
        </el-button>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'searchList',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number
    },
    categoryAll: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {}
  },
  computed: {
    categoryName () {
      let name = ''
      this.categoryAll.map(item => {
        if (item.id === this.data.id_category) {
          name = item.categoryName
        }
      })
      return name
    },
    categorySmall () {
      let name = ''
      this.categoryAll.map(item => {
        if (item.id === this.data.id_category) {
          if (item.categoryType === 'jian') {
            // 件
            name = '组件'
          }
          if (item.categoryType === 'juan' && this.data.table_type === 'aj') {
            // 案卷
            name = '案卷'
          }
          if (item.categoryType === 'juan' && this.data.table_type === 'jn') {
            // 卷内
            name = '卷内'
          }
        }
      })
      return name
    }
  },
  methods: {
    handleToSee (type) {
      const query = {
        type: type,
        id: this.data.id,
        idTable: this.data.id_table,
        idCategory: this.data.id_category
      }
      if (type === 'jn') {
        query.id_table_jn = this.data.id_table_jn
      }
      if (type === 'aj') {
        query.id_table_aj = this.data.id_table_aj
        query.id_aj = this.data.id_aj
      }
      this.$router.push({
        path: '/utilize/utilizeQuery/utilizeDetails',
        query: query
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../styles/mixin";

  .list {
    margin: 20px auto;
    border-radius: 5px;
    border: 2px solid #409EFF;
    border-top: none;
    background: #fff;
    overflow: hidden;

    &:hover {
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    }

    .img-box {
      @include imgBox(130px, 150px);
      background: #eaeaea;
      border-radius: 3px;
    }

    .list-content {
      /*@include wh(calc(100% - 150px), auto);*/
      @include wh(100%, auto);
      display: flex;
      flex-direction: column;
      align-content: stretch;

      .category {
        background: #409EFF;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        color: #fff;
        @include fj;
        align-items: center;

        label {
          font-size: 16px;

          span {
            font-size: 16px;
          }
        }

        .btn {
          color: #fff;

          &:hover {
            opacity: 0.7;
          }
        }
      }

      .content {
        @include sc(15px, #333);
        text-indent: 2em;
        padding: 15px;
      }

      .introduce {
        padding: 10px 15px;
        @include fj(flex-start);
        flex-wrap: wrap;

        li {
          @include fj(flex-start);
          line-height: 36px;
          min-width: 50%;

          label {
            color: #333;
            font-weight: bolder;
            width: 100px;
            text-align: right;
          }

          span {
            color: #666;
            width: calc(100% - 110px);
          }
        }

      }

      .operation-btn {
        text-align: right;
        padding-right: 15px;
      }
    }
  }

  .exhibition {
    height: 1500px;
    background: red;
  }
</style>
